<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Mobile Listview Integration Test</title>

	<script src="../../../external/requirejs/require.js"></script>
	<script src="../../../js/requirejs.config.js"></script>
	<script src="../../../js/jquery.tag.inserter.js"></script>
	<script src="../../jquery.setNameSpace.js"></script>
	<script src="../../jquery.testHelper.js"></script>
	<script src="../../../external/qunit.js"></script>
  <script type="text/javascript">
    // redirects from push-state-tests.html
    $( document ).bind( 'mobileinit', function(){
      $.testHelper.setPushState();
    });
  </script>
	<script>
		$.testHelper.asyncLoad([
			[ "widgets/page" ],
			[
				"jquery.mobile.navigation",
				"widgets/listview",
				"widgets/listview.autodividers",
				"widgets/toolbar",
				"widgets/collapsible",
				"jquery.mobile.buttonMarkup"
			],
			[ "jquery.mobile.init" ],
			[ "listview_core.js" ]
		]);
	</script>

	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css" />
	<link rel="stylesheet" href="../../../external/qunit.css"/>

	<script src="../../swarminject.js"></script>
</head>
<body>

<h1 id="qunit-header">jQuery Mobile Listview Integration Test</h1>
<h2 id="qunit-banner"></h2>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests">
</ol>

<!-- Basic Linked view test -->
<div data-nstest-role="page" id='basic-linked-test'>
	<div data-nstest-role="header">
		<h1>Basic List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview">
			<li>Static</li>
			<li data-nstest-role="list-divider">Divider</li>
			<li><a href="#basic-link-results">Home</a></li>
			<li><a href="#basic-link-results">Back</a></li>
			<li><a href="#basic-link-results">Return</a></li>
		</ul>
	</div>
</div>

<div data-nstest-role='page' id='basic-link-results'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Results</h1>
	</div>
</div>

<!-- Numbered List -->
<div data-nstest-role="page" id='numbered-list-test'>
	<div data-nstest-role="header">
		<h1>Basic List View</h1>
	</div>
	<div data-nstest-role="content">
			<ol data-nstest-role="listview">
				<li><a href="#numbered-list-results">Number 1</a></li>
				<li><a href="#numbered-list-results">Number 2</a></li>
				<li><a href="#numbered-list-results">Number 3</a></li>
			</ol>
	</div>
</div>

<div data-nstest-role='page' id='numbered-list-results'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Numbered List</h1>
	</div>
</div>

<!-- Read only List -->
<div data-nstest-role="page" id='read-only-list-test'>
	<div data-nstest-role="header" data-nstest-position="inline">
		<h1>Basic List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview">
			<li>Read</li>
			<li>Only</li>
			<li>List</li>
			<li>View</li>
		</ul>
	</div>
</div>

<!-- Split listview -->
<div data-nstest-role="page" id='split-list-test'>
	<div data-nstest-role="header">
		<h1>Split List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview">
			<li>
				<a href="#split-list-link1">link one</a>
				<a href="#split-list-link2">link second</a>
			</li>
			<li>
				<a href="#split-list-link1">link one</a>
				<a href="#split-list-link2">link second</a>
			</li>
			<li>
				<a href="#split-list-link1">link one</a>
				<a href="#split-list-link2">link second</a>
			</li>
		</ul>
	</div>
</div>

<div data-nstest-role="page" id='split-list-link1'>
	<div data-nstest-role="header">
		<h1>Split List view 1</h1>
	</div>
</div>

<div data-nstest-role="page" id='split-list-link2'>
	<div data-nstest-role="header">
		<h1>Split List view 2</h1>
	</div>
</div>

<!-- List divider -->
<div data-nstest-role="page" id='list-divider-test'>
	<div data-nstest-role="header">
		<h1>List Divider Test</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview">
			<li>a is for aquaman</li>
			<li>b is for batman</li>
			<li data-nstest-role="list-divider">This is a list divider</li>
			<li>c is for catwoman</li>
			<li data-nstest-role="list-divider">This is another list divider</li>
			<li>d is for darkwing</li>
		</ul>
	</div>
</div>

<!-- Autodivider -->
<div data-nstest-role="page" id="autodividers-test">
	<div data-nstest-role="header">
		<h1>Autodivider Test</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview" data-nstest-autodividers="true">
			<li data-nstest-role="list-divider">SHOULD REMOVE</li>
			<li>a is for aquaman</li>
			<li>b is for batman</li>
			<li>c is for catwoman</li>
			<li>d is for darkwing</li>
		</ul>
	</div>
</div>

<div data-nstest-role="page" id="autodividers-selector-test">
	<div data-nstest-role="header">
		<h1>Autodivider Selector Test</h1>
	</div>
	<div data-nstest-role="content">
		<ul id="autodividers-selector-test-list1" data-nstest-role="listview" data-nstest-autodividers="true">
			<li><a href="#">a is for aquaman</a></li>
			<li>b is for batman</li>
			<li><img><a href="">c is for catwoman</a><a href="">split</a></li>
			<li><a href="#"><h2>d is for darkwing</h2><p>Some text</p></a></li>
		</ul>

		<ul id="autodividers-selector-test-list2" data-nstest-role="listview" data-nstest-autodividers="true">
			<li><div><span class="autodividers-selector-test-selectme">eddie</span> is for aquaman</div></li>
			<li><div><span class="autodividers-selector-test-selectme">frankie</span> is for batman</div></li>
			<li><div><span class="autodividers-selector-test-selectme">georgie</span> is for catwoman</div></li>
			<li><div><span class="autodividers-selector-test-selectme">henry</span> is for darkwing</div></li>
		</ul>
	</div>
</div>

<!-- Programmatically generated list items !-->
<div data-nstest-role="page" id="programmatically-generated-list">
	<ul data-nstest-role="listview" data-nstest-inset="true" id="programmatically-generated-list-items"></ul>
</div>

<!-- Removing items from list -->
<div data-nstest-role="page" id='removing-items-from-list-test'>
	<div data-nstest-role="header">
		<h1>Basic List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview" data-nstest-inset="true">
			<li>Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
			<li>Item 4</li>
		</ul>
	</div>
</div>

<!-- Rounded corners inset list with variable items -->
<div data-nstest-role="page" id='corner-rounded-test'>
	<div data-nstest-role="header">
		<h1>Basic List View</h1>
	</div>
	<div data-nstest-role="content">
		<ul data-nstest-role="listview" data-nstest-inset="true">
		</ul>
	</div>
</div>

<div data-nstest-role="page" id="enhancetest">
	<ul data-nstest-role="listview">
		<li><a href="#basic-link-results">Home</a></li>
		<li><a href="#basic-link-results">Back</a></li>
		<li><a href="#basic-link-results">Return</a></li>
	</ul>
</div>

<div id="list-theme-inherit" data-nstest-theme="b">
  <ul data-nstest-role="listview">
    <li>foo</li>
  </ul>
</div>

<div data-nstest-role="page" id="ui-li-has-test">
  <div data-nstest-role="content">
	<p>Right padding on item 1 is OK (75px).</p>
	<p>Right padding on items 2 &amp; 3 should probably be around 30 or 35 (not 25).</p>
	<p>Right padding on item 4 should be 15px to match the left side.</p>
	<ol data-nstest-role="listview" data-nstest-inset="true">
	  <li><a href="#">Link LI with counter --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></a></li>
	  <li><a href="#">Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a></li>
	  <li><a href="#page1">Page1 Link LI without counter -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a><a href="#page2"></a></li>
	  <li>Static LI with counter ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<span class="ui-li-count">123</span></li>
	  <li>Static LI without counter ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</li>
	  <li><a href="#">Link LI with split button -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a><a href="#">Split</a></li>
	  <li><a href="#"><img class="ui-li-icon">Link LI with icon -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a></li>
	  <li><a href="#"><img>Link LI with thumb -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</a></li>
	</ol>
  </div>
</div>

<div data-nstest-role="page" id="split-list-icon">
	<div data-nstest-role="content">
		<ul data-nstest-role="listview" data-nstest-split-icon="delete">
			<li data-nstest-icon="star"><a href="#">Star</a><a href="#">Star</a></li>
			<li data-nstest-icon="plus"><a href="#">Plus</a><a href="#">Plus</a></li>
			<li><a href="#">Default</a><a href="#">Default</a></li>
      <!-- respect the child element icon -->
			<li data-nstest-icon="star"><a href="#">Default</a><a data-nstest-icon="grid" href="#">Grid</a></li>
		</ul>
	</div>
</div>

<div data-nstest-role="page" id="list-divider-ignore-link">
  <div data-nstest-role="content">
    <ul data-nstest-role="listview">
      <li data-nstest-role="list-divider">A</li>
      <li><a href="index.html">Adam Kinkaid</a></li>
      <li><a href="index.html">Alex Wickerham</a></li>
      <li><a href="index.html">Avery Johnson</a></li>
      <li data-nstest-role="list-divider" id="ignored-link">B has a <a href="#">link</a></li>
      <li><a href="index.html">Bob Cabot</a></li>
      <li data-nstest-role="list-divider">C</li>
      <li><a href="index.html">Caleb Booth</a></li>
      <li><a href="index.html">Christopher Adams</a></li>
    </ul>
  </div><!-- /content -->
</div>

<div data-nstest-role="page" id="list-last-visible-item-border">
	<div data-nstest-role="content">
		<ul data-nstest-role="listview">
			<li class="listitem"><a href="index.html">Adam Kinkaid</a></li>
			<li class="listitem"><a href="index.html">Alex Wickerham</a></li>
			<li class="listitem ui-screen-hidden"><a href="index.html">Bob Cabot</a></li>
			<li id="lastitem"><a href="index.html">Caleb Booth</a></li>
			<li class="listitem ui-screen-hidden"><a href="index.html">Christopher Adams</a></li>
		</ul>
	</div><!-- /content -->
</div>

<div data-nstest-role="page" id="list-inside-collapsible-content">
	<div data-nstest-role="content">
		<div data-nstest-role="collapsible" data-nstest-content-theme="c">
			<h1>Heading</h1>
			<ul data-nstest-role="listview">
				<li><a href="index.html">Adam Kinkaid</a></li>
				<li><a href="index.html">Alex Wickerham</a></li>
				<li id="noninsetlastli"><a href="index.html">Caleb Booth</a></li>
			</ul>
		</div>
		<div data-nstest-role="collapsible" data-nstest-content-theme="c">
			<h1>Heading</h1>
			<ul data-nstest-role="listview" data-nstest-inset="true">
				<li><a href="index.html">Adam Kinkaid</a></li>
				<li><a href="index.html">Alex Wickerham</a></li>
				<li id="insetlastli"><a href="index.html">Caleb Booth</a></li>
			</ul>
		</div>	 
  </div><!-- /content -->
</div>

</body>
</html>
